<template>
  <div>
    <el-table
      :data="tableData"
      border
      :cell-style="{padding: '0'}"
      style="width: 100%">
      <el-table-column
        property="goodId"
        label="编号"
        width="60">
      </el-table-column>
      <el-table-column
        property="goodName"
        label="商品名称"
        width="160"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        property="category"
        label="商品类型"
        width="100">
      </el-table-column>
      <el-table-column
        property="imgurl"
        label="商品图"
        width="70">
        <template #default="scope">
          <el-image class="table-td-thumb" :src="scope.row.imgurl" :preview-src-list="[scope.row.imgurl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        property="rentPriceHour"
        label="价格/小时"
        width="90">
      </el-table-column>
      <el-table-column
        property="rentPriceDay"
        label="价格/天"
        width="80">
      </el-table-column>
      <el-table-column
        property="brand"
        label="商品品牌"
        width="120">
      </el-table-column>
      <el-table-column
        property="goodNewold"
        label="新旧程度"
        width="100">
      </el-table-column>
      <el-table-column
        property="description"
        label="商品描述"
        width="180"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        property="description"
        label="使用需知"
        width="180"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        label="上传时间"
        width="130">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        property="status"
        label="审核状态"
        width="80">
        <template slot-scope="scope">
          <el-tag size="small" :type="scope.row.status==2?'danger':scope.row.status==1?'success':''">{{scope.row.status==0?'未审核':scope.row.status==1?'通过':'未通过'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="80">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页条-->
    <el-pagination
      class="pagination"
      style="padding-top: 15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[7, 10, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--弹窗-->
    <el-dialog
      title="商品审核"
      :visible.sync="dialogFormVisible"
      width="1000px">
      <el-descriptions class="margin-top" title="用户信息" :column="3" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            商品名称
          </template>
          {{tableList.goodName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            价格/小时
          </template>
          {{tableList.rentPriceHour}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            价格/天
          </template>
          {{tableList.rentPriceDay}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            商品实物图
          </template>
          <template>
            <el-image style="width: 40px" :src="tableList.imgurl" :preview-src-list="[tableList.imgurl]">
            </el-image>
          </template>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            商品类型
          </template>
          {{tableList.category}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            创建时间
          </template>
          {{tableList.createTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            使用须知
          </template>
          {{tableList.usedKnow}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            商品品牌
          </template>
          {{tableList.brand}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            审核状态
          </template>
          {{tableList.status==0?'未审核':'未通过'}}
        </el-descriptions-item>
      </el-descriptions>
      <div class="suggest">
        <div style="margin-bottom: 10px;margin-top: 50px;margin-left: 470px">
          商品审核：
          <el-select v-model="comfirm.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button style="margin-left: 20px"  @click="dialogFormVisible=false" type="danger">取消</el-button>
          <el-button type="success" @click="doUpdate">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'GoodComfirm',
    data() {
      return {
        tableData:[],
        // 每页显示的条数
        size: 7,
        // 总条数
        total: 100,
        // 当前页码
        current:1,
        dialogFormVisible:false,
        tableList:{},
        comfirm:{
          goodId:'',
          status:'',
        },
        options: [{
          value: 1,
          label: '通过'
        }, {
          value: 2,
          label: '不通过'
        }],
      }
    },
    mounted(){
      this.initTable();
    },
    methods: {
      //显示弹出框赋值
      doUpdate(){
        if (this.comfirm.status===2||this.comfirm.status===1){
          // 修改商品状态
          this.putRequest('/personal/data/rent/',this.comfirm).then(resp=>{
            if (resp){
              this.dialogFormVisible=false;
              this.initTable();

              this.$notify.success({ title: '成功', message: '审核成功' });

            }
          })
        } else {

          this.$notify.info({ title: '消息', message: '请输入审核状态' });
        }
      },
      handleClick(data){
        this.comfirm.goodId=data.goodId;
        Object.assign(this.tableList,data);
        this.dialogFormVisible=true;
      },
      // 当每页条数改变时
      handleSizeChange(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        this.initTable();
      },
      // 当每页码数改变时
      handleCurrentChange(val) {
        // 将val重新复制给current
        this.current=val;
        this.initTable();
      },
      //查询全部数据
      initTable () {
        let url = '/comfirm/pass/findUserList/?current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.total=resp.total
            this.tableData = resp.records;
          }
        })
      },
    }
  }
</script>

<style scoped>
  .pagination{
    margin-left: 750px;
  }

</style>
